<script lang="ts" setup>
import { onMounted, ref } from "vue";
import onResize from "@/utils/onDomResize";
interface Props {
  tabList?: Array<string>;
  activeColor?: string;
  modelValue: number;
  fontSize?: number;
}
const props = withDefaults(defineProps<Props>(), {
  tabList: () => ["求求你传点数据"],
  activeColor: "#3da0fc",
  modelValue: 0,
  fontSize: 15,
});
const emit = defineEmits(["update:modelValue"]);
const changeTab = (index: number): void => {
  emit("update:modelValue", index);
};

const bthItemWidth = ref<number>(0);
const bthItemHeight = ref<number>(0);
onMounted(() => {
  onResize(
    conTabRef.value!,
    (e: { width: number; height: number; [key: string]: number }) => {
      bthItemWidth.value = e.width / props.tabList.length;
      bthItemHeight.value = e.height;
    }
  );
});
//---
const conTabRef = ref<HTMLElement | null>(null);
</script>
<template>
  <div class="conTab" ref="conTabRef">
    <div class="typeTab">
      <div
        class="bthItem"
        v-for="(item, index) in tabList"
        :key="item"
        @click="changeTab(index)"
      >
        {{ item }}
      </div>
    </div>
    <div class="typeTab mask">
      <div
        class="bthItem"
        v-for="(item, index) in tabList"
        :key="item"
        @click="changeTab(index)"
      >
        {{ item }}
      </div>
    </div>
    <div class="activeTab"></div>
  </div>
</template>
<style lang="scss" scoped>
.conTab {
  height: 100%;
  position: relative;
  width: 100%;
  overflow: hidden;
  font-size: v-bind("`${fontSize}px`");
  .activeTab {
    height: 100%;
    width: v-bind("`${bthItemWidth}px`");
    position: absolute;
    top: 0;
    left: v-bind("`${modelValue * bthItemWidth}px`");
    background-color: v-bind(activeColor);
    transition: all 0.3s;
    border-radius: v-bind("bthItemHeight/2 + 'px'");
  }
  .typeTab {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: #e8edf3;
    border-radius: v-bind("bthItemHeight/2 + 'px'");
    .bthItem {
      flex: 1;
      height: 100%;
      line-height: 40px;
      text-align: center;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.3s;
    }
  }
  .mask {
    height: 100%;
    width: 100%;
    color: #fff;
    transition: all 0.3s;
    clip-path: v-bind(
      "`ellipse(${bthItemWidth/2}px 100% at ${bthItemWidth/2 + modelValue * bthItemWidth}px 50%)`"
    );
    z-index: 2;
    background-color: transparent;
  }
}
</style>
